<template>
  <div class="progress-entrance-container">
    <div class="sequence-number">{{ getSequenceNumber }}</div>
    <div class="config-name">{{ info.login }}</div>
    <div class="config-name">{{ info.email === '' ? '无' : info.email }}</div>
    <div class="config-name">{{ getProgress }}</div>
    <!--    <el-progress type="circle" :percentage=getProgress :width="30"></el-progress>-->
  </div>
</template>

<script>
// import Progress from 'element-ui'
// Vue.use(Progress)

export default {
  name: "StudentEntrance",
  props: {
    sequenceNumber: {
      type: Number,
      default: 0
    },
    info: {
      type: Object,
      default: {
        id: "61fa6fef9468e45ef54a6278",
        login: "333",
        progress: "0.451",
        email: "333222111@qq.com"
      }
    }
  },
  computed: {
    getSequenceNumber() {
      return this.sequenceNumber + 1
    },
    getProgress() {
      return Number((this.info.progress > 1 ? 1 : this.info.progress) * 100).toFixed(2) + "%"
    }
  }
}
</script>

<style lang="less" scoped>
.progress-entrance-container {
  background-color: #f4f4f5;
  padding: 12px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  &:hover {
    transition: all 0.2s linear;
    background-color: #E5E5E5;
  }

  .sequence-number {
    background-color: #1BD0A2;
    min-height: 22px;
    min-width: 22px;
    border-radius: 22px;
    color: white;
    text-align: center;
    padding: 1px;
  }

  .config-name {
    margin-left: 10px;
    flex: 1;
    font-size: 14px;
  }

  .config-btn-container {
    display: flex;

    .config-btn:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
}
</style>
